<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code 五大核心功能深度解析</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-content">
            <a href="index.html" class="logo">Claude Code</a>
            <ul class="nav-links">
                <li><a href="cli.html">CLI命令</a></li>
                <li><a href="slash.html">斜杠命令</a></li>
                <li><a href="settings.html">Settings</a></li>
                <li><a href="memory.html">内存管理</a></li>
                <li><a href="mcp.html">MCP协议</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero区域 -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Claude Code 五大核心功能</h1>
                <p class="subtitle">代理式编程的革命性突破</p>
                <p class="description">
                    深入探索Claude Code的CLI命令、斜杠命令、Settings设置、内存管理和MCP协议，
                    掌握这款终端原生AI编程工具的精髓，开启高效的代理式开发之旅。
                </p>
            </div>
        </div>
    </section>

    <!-- 功能概览 -->
    <section class="section">
        <div class="container">
            <div class="section-card fade-in">
                <h2 class="section-title">🎯 核心功能概览</h2>
                <p class="section-subtitle">Claude Code的五大核心功能，构建完整的代理式编程生态</p>

                <div class="grid grid-3">
                    <div class="feature-card fade-in">
                        <div class="feature-icon">🖥️</div>
                        <h3 class="feature-title">CLI命令</h3>
                        <p class="feature-text">
                            终端原生的强大体验，丰富的命令选项和标志参数，
                            无缝融入开发者的日常工作流程。
                        </p>
                        <a href="cli.html" class="doc-link" style="margin-top: 20px;">了解详情</a>
                    </div>
                    <div class="feature-card fade-in">
                        <div class="feature-icon">⚡</div>
                        <h3 class="feature-title">斜杠命令</h3>
                        <p class="feature-text">
                            高效操作的快捷键，内置命令、自定义命令和MCP命令，
                            大幅提升开发效率。
                        </p>
                        <a href="slash.html" class="doc-link" style="margin-top: 20px;">了解详情</a>
                    </div>
                    <div class="feature-card fade-in">
                        <div class="feature-icon">⚙️</div>
                        <h3 class="feature-title">Settings设置</h3>
                        <p class="feature-text">
                            五层配置体系，精确控制AI行为，
                            在自动化便利性和操作安全性之间找到最佳平衡。
                        </p>
                        <a href="settings.html" class="doc-link" style="margin-top: 20px;">了解详情</a>
                    </div>
                    <div class="feature-card fade-in">
                        <div class="feature-icon">🧠</div>
                        <h3 class="feature-title">内存管理</h3>
                        <p class="feature-text">
                            AI的项目记忆系统，CLAUDE.md文件作为项目宪法，
                            持久化上下文，让AI成为项目专家。
                        </p>
                        <a href="memory.html" class="doc-link" style="margin-top: 20px;">了解详情</a>
                    </div>
                    <div class="feature-card fade-in">
                        <div class="feature-icon">🌐</div>
                        <h3 class="feature-title">MCP协议</h3>
                        <p class="feature-text">
                            模型上下文协议，连接万物的AI接口，
                            开放标准释放无限可能。
                        </p>
                        <a href="mcp.html" class="doc-link" style="margin-top: 20px;">了解详情</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 特色亮点 -->
    <section class="section">
        <div class="container">
            <div class="section-card fade-in">
                <h2 class="section-title">✨ 为什么选择Claude Code</h2>
                <p class="section-subtitle">革命性的代理式编程体验</p>

                <div class="grid grid-2">
                    <div class="feature-card fade-in">
                        <div class="feature-icon">🚀</div>
                        <h3 class="feature-title">终端原生设计</h3>
                        <p class="feature-text">
                            专为终端环境优化，无缝融入开发者工作流，
                            告别繁琐的图形界面切换。
                        </p>
                    </div>
                    <div class="feature-card fade-in">
                        <div class="feature-icon">🛡️</div>
                        <h3 class="feature-title">安全可控</h3>
                        <p class="feature-text">
                            精细的权限控制系统，分层配置管理，
                            确保AI操作的安全性和可控性。
                        </p>
                    </div>
                    <div class="feature-card fade-in">
                        <div class="feature-icon">🔄</div>
                        <h3 class="feature-title">智能记忆</h3>
                        <p class="feature-text">
                            项目级内存管理，AI能够理解项目上下文，
                            提供个性化的开发建议。
                        </p>
                    </div>
                    <div class="feature-card fade-in">
                        <div class="feature-icon">🌍</div>
                        <h3 class="feature-title">生态扩展</h3>
                        <p class="feature-text">
                            基于MCP协议的开放生态，轻松集成各种工具和服务，
                            构建属于你的AI工具链。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 开始使用 -->
    <section class="section">
        <div class="container">
            <div class="section-card fade-in">
                <div style="text-align: center; padding: 48px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-radius: 20px;">
                    <h3 style="margin: 0 0 24px 0; font-size: 2rem;">🚀 立即开始Claude Code之旅</h3>
                    <p style="margin: 0 0 32px 0; font-size: 1.1rem; opacity: 0.9;">
                        从代码执行者到AI协调者，从重复劳动到创造性工作<br>
                        这不仅是工具的升级，更是开发者价值的升华
                    </p>
                    <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
                        <a href="https://docs.anthropic.com/zh-CN/docs/claude-code" 
                           style="color: white; text-decoration: none; padding: 12px 24px; background: rgba(255,255,255,0.2); border-radius: 10px; font-weight: 600;" 
                           target="_blank">中文文档</a>
                        <a href="https://github.com/anthropics/claude-code" 
                           style="color: white; text-decoration: none; padding: 12px 24px; background: rgba(255,255,255,0.2); border-radius: 10px; font-weight: 600;" 
                           target="_blank">GitHub</a>
                        <a href="https://modelcontextprotocol.io/" 
                           style="color: white; text-decoration: none; padding: 12px 24px; background: rgba(255,255,255,0.2); border-radius: 10px; font-weight: 600;" 
                           target="_blank">MCP官网</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top" onclick="scrollToTop()">↑</button>

    <script src="common.js"></script>
</body>
</html> 